<template>
  <el-dialog
    :title="isEdit ? '编辑商户' : '添加商户'"
    :visible.sync="dialogVisible"
    width="600px"
    :close-on-click-modal="false"
    @closed="handleClosed">
    
    <el-form 
      :model="form" 
      :rules="rules" 
      ref="form" 
      label-width="100px">
      
      <el-form-item label="商户名称" prop="name">
        <el-input 
          v-model="form.name" 
          placeholder="请输入商户名称"
          :disabled="isEdit">
        </el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="mobile">
        <el-input 
          v-model="form.mobile" 
          placeholder="请输入手机号"
          :disabled="isEdit">
        </el-input>
      </el-form-item>


    </el-form>

    <div slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button 
        type="primary" 
        :loading="loading" 
        @click="handleSave">
        {{ isEdit ? '保存' : '创建' }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createMerchant } from '@/api/chuandao';

export default {
  name: 'MerchantEdit',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      
      form: {
        name: '',
        mobile: ''
      },

      rules: {
        name: [
          { required: true, message: '请输入商户名称', trigger: 'blur' },
          { min: 2, max: 50, message: '商户名称长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ]
      },

    };
  },

  computed: {
    isEdit() {
      return !!(this.data && this.data.id);
    }
  },

  watch: {
    visible(val) {
      this.dialogVisible = val;
    },
    dialogVisible(val) {
      this.$emit('update:visible', val);
    },
    data: {
      handler(val) {
        if (val && this.dialogVisible) {
          this.loadData();
        }
      },
      immediate: true
    }
  },


  methods: {
    // 加载数据
    loadData() {
      if (this.isEdit && this.data) {
        // 编辑模式，加载现有数据
        this.form = {
          name: this.data.name || '',
          mobile: this.data.mobile || ''
        };
      } else {
        // 新增模式，重置表单
        this.resetForm();
      }
    },

    // 重置表单
    resetForm() {
      this.form = {
        name: '',
        mobile: ''
      };
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate();
      });
    },



    // 保存
    handleSave() {
      this.$refs.form.validate(valid => {
        if (!valid) return;


        this.loading = true;
        const data = { ...this.form };


        if (this.isEdit) {
          // 编辑模式
          // 这里应该调用更新API
          this.$message.info('编辑功能开发中...');
          this.loading = false;
        } else {
          // 新增模式
          createMerchant(data).then(res => {
            if (res.code === 200) {
              this.$message.success('创建成功');
              this.dialogVisible = false;
              this.$emit('done');
            } else {
              this.$message.error(res.message || '创建失败');
            }
          }).catch(error => {
            console.error('创建商户失败:', error);
            this.$message.error('创建失败，请重试');
          }).finally(() => {
            this.loading = false;
          });
        }
      });
    },

    // 弹窗关闭
    handleClosed() {
      this.resetForm();
    }
  }
};
</script>

<style scoped>
.mobile-success {
  color: #67C23A;
  font-size: 12px;
  margin-top: 5px;
}

.mobile-error {
  color: #F56C6C;
  font-size: 12px;
  margin-top: 5px;
}

.el-divider {
  margin: 20px 0;
}

/* 坐标输入框样式 */
.coordinate-inputs {
  display: flex;
  gap: 10px;
}

.coordinate-inputs .el-input {
  flex: 1;
}

/* 位置获取按钮样式 */
.location-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
}

.location-actions .el-button {
  margin-right: 10px;
}

.location-hint {
  color: #909399;
  font-size: 12px;
}

/* 表单项间距调整 */
.el-form-item {
  margin-bottom: 18px;
}

/* 复选框样式调整 */
.el-checkbox {
  margin: 10px 0;
}
</style>